<template>
     <el-dialog label-position="left" class="assignments-modal" title="任务指派" :visible.sync="isShowService">
    <el-form ref="form" :model="assignData" label-width="80px" size="mini">
      <el-form-item label="指派时间">
        <el-date-picker :disabled="isShowDelAssign" :picker-options="pickerOptions" clearable v-model="assignTime" :default-time="['08:00:00', '23:59:59']" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss"
          range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="指派人">
        <el-select v-model="assignData.objectId" :disabled="isShowDelAssign" placeholder="请选择">
          <el-option clearable v-for="item in serviceArr" :key="item.userid" :label="item.name" :value="item.userid+''">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="指派理由">
        <el-input :disabled="isShowDelAssign" type="textarea" :rows="2" placeholder="请填写指派理由" v-model="assignData.remark">
        </el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" size="small" @click="sendAssign" v-if="!isShowDelAssign">发送</el-button>
      <el-button type="danger" size="small" @click="delAssign" v-else>取消指派</el-button>
      <el-button @click="$emit('update:isShowService',false)" size="small">取消</el-button>
    </div>
  </el-dialog>
</template>
           
<script>
import {
  serviceAssign,
  chanelAssTask,
  getCustService,
  getAssTask,
} from "@/api/home";
export default {
  props: ["isShowService", "myInfo"],
  watch: {
    isShowService(val) {
      if (val) {
        this.isShowDelAssign = false;
        getCustService().then((res) => {
          //查询客服信息
          if (res.resp_code == 0) {
            this.serviceArr = res.datas;
          }
        });
        getAssTask({ assignId: this.myInfo.id }).then((res) => {
          if (res.resp_code == 0 && res.datas) {
            this.assignData.objectId = res.datas.objectId;
            this.assignData.assId = res.datas.assId;
            this.assignTime = [res.datas.startTime, res.datas.endTime];
            this.isShowDelAssign = true;
          }
        });
      }
    },
  },
  data() {
    return {
      serviceArr: [],
      assignData: {
        //指派信息
        startTime: "", //开始时间
        endTime: "", //结束时间
        assignId: "", //指派人ID
        objectId: "", //被指派人ID
        remark: "", //指派理由
        resource: "1", //客户端指派
      },
      isShowDelAssign: false,
      pickerOptions: {
        //指派时间范围限制
        disabledDate: (time) => {
          return time.getTime() < Date.now() - 24 * 3600 * 1000; //如果不包括今天。就是return time.getTime() > Date.now() - 24*3600*1000;
        },
      },
      assignTime: [], //指派时间
    };
  },
  methods: {
    delAssign() {
      this.$confirm("确认取消该指派？", "确认取消", {
        distinguishCancelAndClose: true,
        confirmButtonText: "确认",
        cancelButtonText: "取消",
      }).then(() => {
        chanelAssTask({ taskId: this.assignData.assId }).then((res) => {
          if (res.resp_code == 0) {
            this.$Message.success("取消指派成功");
            // this.$emit("update:isShowDelAssign", false);
            this.isShowDelAssign = false;
          }
        });
      });
    },
    sendAssign() {
      //提交转派信息
      this.assignData.startTime = this.assignTime[0];
      this.assignData.endTime = this.assignTime[1];
      this.assignData.assignId = this.myInfo.id;
      if (this.assignData.assignId == this.assignData.objectId) {
        this.$Message.warning("被指派人不能是自己");
      }
      serviceAssign(this.assignData).then((res) => {
        if (res.resp_code == 0) {
          this.$Message.success("指派成功");
          this.$emit("update:isShowService", false);
          //   this.isShowService = false;
        } else {
          this.$Message.warning(res.resp_msg);
        }
      });
    },
  },
};
</script>
<style scoped>
</style>